
import { Route } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group'
import classNames from 'classnames';
import './index.scss'
const ANIMATION_MAP = {
    PUSH: 'router-view-forward',
    POP: 'router-view-back'
}

const renderRouter = (routerData) => {
    return routerData.map(({ path, exact, Component }) => {
        return <Route
            path={path}
            key={path}
            exact={exact || false}
        >
            {({ match, history }) => (
                <CSSTransition
                    in={match !== null}
                    timeout={500}
                    classNames={ANIMATION_MAP[history.action]}
                    unmountOnExit
                >
                    <div className={classNames({
                        "router-view-page": match !== null,
                        "router-view-unmount-page": match === null
                    })}>
                        <Component />
                    </div>
                </CSSTransition>
            )}
        </Route>
    })
}

const RouterView = (props) => {
    
    return renderRouter(props.data) 
}

export default RouterView